<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            color: aliceblue;
        }

        input {
            font-size: 36px;
            padding: 8px;
            background: none;
            border: 1px dotted white;
        }

        body {
            background: #282726;
        }

        span {
            font-size: 30px;
        }
    </style>
</head>

<body>

    white-space: pre;

    <div id="app">
        <h1>index.html -  tb_word 模糊查询 </h1>
        <!-- <h2> 图片放在 yxb\static\img\ 下面 </h2> -->
        <!-- <img src="static/img/test.jpg"> -->


        <h1>请输入 : %config%  按下回车键   </h1>
        <input type="text" @keyup.enter="get_word_list">

        <h3> {{key}} </h3>
        <!-- <h3>[[word_list]]</h3> -->

        <div v-for="(item,index) in word_list" :key="index">
            <span>[[item.eng]]</span>
            <span>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   </span>
            <span>[[item.chi]]</span>
        </div>

    </div>

</body>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.5/vue.global.min.js" type="application/javascript"></script>
<script>
    //  var date={{ str1 }}
    let data = JSON.parse('{{ data|safe }}');
    console.log(data.title);

    const { createApp } = Vue
    createApp({
        delimiters: ['[[', ']]'],
        data() {
            return {
                title: data.title,
                content: data.content,
                word_list: []
            }
        },
        methods: {
            get_word_list: function (eee) {
                let api_url = "/ajax/get_words/";   // 如果是 django 后端一定需要加上 / 反斜杠
                let postObj = {
                    word: eee.target.value
                };
                fetch(api_url, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', },
                    body: JSON.stringify(postObj),
                })
                    .then(response => response.json())  // 解析响应为 json, 解析响应为 json, 无需再 JSON.parse() 解析
                    // .then(response => response.text())  // 解析响应为 文本
                    .then(data => {
                        console.log(data);
                        this.word_list = data;
                    })
                    .catch((error) => {
                        console.error('Error:', error);
                    });

            }
        }
    }).mount('#app')






    let api_url = "/test/user?id=236&name=jack_tom";
    fetch(api_url, {
        method: 'GET',
        headers: { 'Content-Type': 'application/json', },
    })
        // .then(response => response.json())  // 解析响应为 json, 无需再 JSON.parse() 解析
        .then(response => response.text())  // 解析响应为 文本
        .then(data => {
            console.log(data);
        })
        .catch((error) => {
            console.error('Error:', error);
        });


</script>

</html>